<template>
  <div class="h-full overflow-y-auto">
    <div class="card">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ t('trade.交易总览') }}</div>
          <DatePick class="ml20" @change="getOrderData" />
        </div>
      </PageHeader>
      <div class="inside-card">
        <div class="level2 flex_aic">
          <div class="w-210" v-for="item in baseInfo1" :key="item.name">
            <div class="flex_aic">
              <span>{{ item.name }}</span>
              <el-tooltip
                :content="item.tips"
                placement="right"
                style="width: 300px"
                v-if="item.tips"
              >
                <el-icon class="ml8" :size="16" color="#999999">
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="mt14">
              <span v-if="item.name.includes('元')">￥</span>
              <span class="fs-28">{{ orderData?.[item.key] ?? "--" }}</span>
            </div>
          </div>
        </div>
        <div class="level3 flex_aic">
          <div class="w-210" v-for="item in baseInfo2" :key="item.name">
            <div class="flex_aic">
              <span>{{ item.name }}</span>
              <el-tooltip
                :content="item.tips"
                placement="right"
                style="width: 300px"
                v-if="item.tips"
              >
                <el-icon class="ml8" :size="16" color="#999999">
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="mt14">
              <span v-if="item.name.includes('元')">￥</span>
              <span class="fs-28">{{ orderData?.[item.key] ?? "--" }}</span>
            </div>
          </div>
        </div>
        <Pyramid :rate="salePayConversionRate" />
      </div>
    </div>

    <div class="card mt10">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ t('trade.近30天变化趋势') }}</div>
        </div>
      </PageHeader>
      <div class="mt20 ml20 flex_aic">
        <div class="mr12">{{ t('trade.筛选项') }}</div>
        <el-radio-group v-model="dataType" size="small" @change="getChartData1">
          <el-radio
            v-for="item in dataTypeOptions"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <div class="lineChart" id="chart1"></div>
    </div>

    <div class="flex mt10 gap-10">
      <div class="card2">
        <Table1 />
      </div>
      <div class="card2">
        <Chart2 />
      </div>
    </div>

<!--    <div class="card mt10">
      <Table2 />
    </div>-->
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import { InfoFilled } from "@element-plus/icons-vue";
import Pyramid from "./pyramid.vue";
import moment from "moment";
import DatePick from "@/components/datePick.vue";
import initChart from "@/utils/chart";
import Api from "@/config/api/api";
import Table1 from "./components/table1.vue";
import Table2 from "./components/table2.vue";
import Chart2 from "./components/chart2.vue";

const { t } = useI18n();

const timeRange = ref("yesterday");
const dateRange = ref(moment().format("YYYY-MM-DD"));
const salePayConversionRate = ref(0);
const baseInfo1 = ref([
  {
    name: t('trade.下单金额元'),
    value: 123.1,
    tb: 0.12,
    tips: t('trade.统计时间内用户成功提交订单的金额总和'),
    key: "saleCreateAmount",
  },
  {
    name: t('trade.下单数'),
    value: 12,
    tb: 0.12,
    tips: t('trade.统计时间内用户成功提交订单的笔数总和'),
    key: "saleCreateCount",
  },
  {
    name: t('trade.下单人数'),
    value: 12,
    tb: 0.12,
    tips: t('trade.统计时间内成功提交订单的去重人数总和'),
    key: "saleCreateVipCount",
  },
  {
    name: t('trade.下单客单价元'),
    value: 12,
    tb: 0.12,
    tips: t('trade.统计时间内下单金额下单人数'),
    key: "saleCreatePerAmount",
  },
]);

const baseInfo2 = ref([
  {
    name: t('trade.支付金额元'),
    value: 123.1,
    tb: 0.12,
    tips: t('trade.统计时间内用户成功支付的金额总和'),
    key: "saleAmount",
  },
  {
    name: t('trade.支付订单数'),
    value: 12,
    tb: 0.12,
    tips: t('trade.统计时间内用户成功支付的订单数量总和'),
    key: "saleCount",
  },
  {
    name: t('trade.支付人数'),
    value: 12,
    tb: 0.12,
    tips: t('trade.统计时间内成功付款的去重人数总和'),
    key: "saleVipCount",
  },
  {
    name: t('trade.支付客单价元'),
    value: 12,
    tb: 0.12,
    tips: t('trade.统计时间内支付金额下单人数'),
    key: "salePerAmount",
  },
]);

const dataType = ref("1");
const dataTypeOptions = ref([
  {
    label: t('trade.下单金额支付金额'),
    value: "1",
  },
  {
    label: t('trade.下单数支付订单数'),
    value: "2",
  },
]);
const orderData = ref({});

const tableData3 = ref([]);
const reportTotal = ref(0);

const fetchReportData = () => {
  const mockData = [];

  let startDate;
  let days;

  if (timeRange.value === "yesterday") {
    startDate = moment().subtract(1, "days");
    days = 1;
  } else if (timeRange.value === "week") {
    startDate = moment().subtract(7, "days");
    days = 7;
  } else {
    startDate = moment().subtract(30, "days");
    days = 30;
  }

  for (let i = 0; i < days; i++) {
    const date = moment(startDate).add(i, "days").format("YYYY-MM-DD");
    const orderCount = Math.floor(Math.random() * 500) + 100;
    const orderUserCount = Math.floor(Math.random() * 300) + 80;
    const orderAmount = Math.random() * 10000 + 5000;
    const payOrderCount = Math.floor(orderCount * (Math.random() * 0.3 + 0.6));
    const payUserCount = Math.floor(
      orderUserCount * (Math.random() * 0.3 + 0.6)
    );
    const payAmount = orderAmount * (Math.random() * 0.3 + 0.6);
    const payRate = ((payOrderCount / orderCount) * 100).toFixed(2);

    mockData.push({
      date,
      orderCount,
      orderUserCount,
      orderAmount,
      payOrderCount,
      payUserCount,
      payAmount,
      payRate,
    });
  }

  mockData.sort((a, b) => moment(b.date).valueOf() - moment(a.date).valueOf());

  tableData3.value = mockData;
  reportTotal.value = mockData.length;
};

const chart1 = null;

const getOrderData = async (params) => {
  Api.sale_summary({
    startDate: params[0],
    endDate: params[1],
  }).then((res) => {
    orderData.value = res.data || {};
    salePayConversionRate.value = res.data.salePayConversionRate
  });
};

const getChartData1 = () => {
  Api.saleTrend({
    startDate: moment().subtract(29, "days").format("YYYY-MM-DD"),
    endDate: moment().format("YYYY-MM-DD"),
    type: 2,
  }).then((res) => {
    if (dataType.value === "1") {
      initChart(
        "chart1",
        chart1,
        [
          {
            name: t('trade.下单金额'),
            data: res.data?.map((v) => v.saleCreateAmount) || [],
            rgb: "33,195,188",
          },
          {
            name: t('trade.支付金额'),
            data: res.data?.map((v) => v.saleAmount) || [],
            rgb: "30,135,240",
          },
        ],
        res.data?.map((v) => v.time) || []
      );
    } else {
      initChart(
        "chart1",
        chart1,
        [
          {
            name: t('trade.下单金额'),
            data: res.data?.map((v) => v.saleCreateCount) || [],
            rgb: "33,195,188",
          },
          {
            name: t('trade.支付订单数'),
            data: res.data?.map((v) => v.saleCount) || [],
            rgb: "30,135,240",
          },
        ],
        res.data?.map((v) => v.time) || []
      );
    }
  });
};

onMounted(() => {
  getChartData1();
  fetchReportData();
});

watch(timeRange, () => {
  fetchReportData();
});

watch(dateRange, () => {
  fetchReportData();
});
</script>

<style lang="scss" scoped>
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.card {
  background-color: #fff;
  border-radius: 2px;

  .titleBox {
    width: 100px;
    background-color: #fff7f4;
  }

  .intoBox {
    border-radius: 2px;
    background-color: #eee3;
    height: 90px;
    width: calc((100% - 64px) / 5);
  }
  .w-210 {
    width: 210px;
  }

  .color-green {
    color: rgb(74, 222, 128);
  }
  .color-red {
    color: #f56c6c;
  }
  .inside-card {
    padding: 20px 20px 40px;
    position: relative;
    .level2 {
      background: rgb(253, 253, 253);
      box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 12px 0px;
      border-radius: 0px 0px 4px 4px;
      padding: 14px 22px 10px;
      height: 147px;
    }

    .level3 {
      background: rgb(245, 245, 245);
      box-shadow: rgba(187, 187, 187, 0.18) 0px 2px 4px 0px;
      border-radius: 0px 0px 4px 4px;
      padding: 14px 22px 10px;
      height: 147px;
    }
  }
}

.lineChart {
  width: 100%;
  height: 458px;
}

.p10 {
  padding: 10px;
}

.pagination-container {
  margin-top: 20px;
  padding: 0 20px 20px;
  display: flex;
  justify-content: flex-end;
}
.card2 {
  background-color: #fff;
  border-radius: 2px;
  width: calc((100% - 10px) / 2);
  .chart_box {
    height: 458px;
    margin-top: 30px;
  }
}
</style>
